<template>
	<view>
		<view style="display: flex;flex-direction:row;align-items: center;justify-content: space-between;
			margin-left: 24upx;margin-right: 24upx;flex-wrap: wrap;">

			<view style="display: flex;flex-direction:column;align-items: center;margin-top: 12upx;margin-left: 12upx;margin-bottom: 12upx;"
				v-for="item in menu" :key="item" @click="itemClick(item.foodId)">
				<image style="border-radius: 20upx;width: 320upx;height: 320upx;" :src="item.picture" mode="aspectFill">
				</image>
				<view style="" class="item-name">{{item.name}}</view>
			</view>


		</view>

	</view>
</template>

<script>
	import uniIcons from "@/components/uni/uni-icons/uni-icons.vue";
	import {
		myRequestPost
	} from '@/utils/request.js'
	export default {
		props: ['menu'],
		components: {
			uniIcons
		},
		data() {
			return {};
		},
		methods: {
			itemClick(foodId) {
				uni.navigateTo({
					url: '/pages/fooddetail/fooddetail?foodId=' + foodId
				})
			}
		}
	}
</script>

<style lang="scss">
	.item-wrapper {
		display: flex;
		flex-direction: row;
		align-items: center;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.item-name {
		margin-top: 10upx;
		font-size: 32upx;
		font-weight: bold;
		width: 260upx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
</style>